<template>
  <div class="page">
    <div id="YmyThree1"></div>
    <div id="YmyThree2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.quarterScore();
  },
  methods: {
       // 季度得分
    quarterScore() {
      var YmyChart1 = this.$echarts.init(document.getElementById("YmyThree1"));
      YmyChart1.setOption({
        title: {
          text: "三个经济领导小组办公室二季度考核综合得分",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: [
        //     "'负面清单'得分",
        //     "日常工作台账",
        //     "加分项",
        //     "减分项",
        //     "总分"
        //   ]
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 20, name: "'负面清单'得分" },
              { value: 5, name: "日常工作台账" },
              { value: 6, name: "加分项" },
              { value: 4, name: "减分项" },
              { value: 100, name: "总分" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
      var YmyChart2 = this.$echarts.init(document.getElementById("YmyThree2"));
      YmyChart2.setOption({
        color: ["#33CCCC"],
        title: {
          text: "市级责任单位第一季度综合得分",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: [
            "市委军民融合办",
            "市气象局",
            "市供销联社",
            "市秦岭保护局",
            "市税务局",
            "市委编办",
            "市妇联"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            barWidth: 40,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            },
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    },
  }
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  padding-top:40px;
  > div {
    height: 440px;
    margin-bottom:20px;
  }
  #YmyThree1{
    float: left;
    width: 30%;
  }
   #YmyThree2{
     float: left;
     width: 60%;
   }
}
</style>
